import React from 'react'
import Head from 'next/head'
import { Row, Col, Affix } from 'antd'
import ArticleBd from '../components/ArticleBd'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'
import { CalendarOutlined, FolderAddOutlined, FireOutlined } from '@ant-design/icons';
// import MarkNav from 'markdown-navbar';
// import 'markdown-navbar/dist/navbar.css';
import marked from 'marked'

import Tocify from '../components/tocify.tsx'

import hljs from "highlight.js/lib/highlight.js";
import "highlight.js/styles/monokai-sublime.css";

import '../static/style/pages/detailed.less'

import servicePath from '../config/apiUrl'


const that = React;


const Detailed = (props) => {
    console.log("resolve-init-data~~", props);

    const renderer = new marked.Renderer();

    const tocify = new Tocify()
    renderer.heading = function (text, level, raw) {
        const anchor = tocify.add(text, level);
        return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
    };

    marked.setOptions({
        renderer: renderer,
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });

    let html = marked(props.article_content)



    // const [linkedArray, setLinkedArray] = useState([])

    // useEffect(()=>{
    //     const fetchData = async ()=>{
    //         const result = that.$http().then(res=>{
    //             setLinkedArray(res.data.data)
    //             return res.data.data
    //         }
    //         )
    //         setLinkedArray(result)
    //     }
    //     fetchData()
    // },[])

    return (
        <div>
            <Head>
                <title>Detailed</title>
            </Head>
            <Header />
            <Row className="comm-main" type="flex" justify="center">
                <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
                    <div>
                        <ArticleBd />
                        <div>
                            <div className="detailed-title">
                                React实战视频教程-技术胖Blog开发(更新08集)
                            </div>
                            <div className="list-icon center">
                                <span><CalendarOutlined /> 2019-06-28</span>
                                <span><FolderAddOutlined /> 视频教程</span>
                                <span><FireOutlined /> 5498人</span>
                            </div>
                            <div className="detailed-content" >
                                <div dangerouslySetInnerHTML={{ __html: html }}></div>
                            </div>
                        </div>
                    </div>
                </Col>

                <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author />
                    <Advert />
                    <Affix offsetTop={5}>
                        <div className="detailed-nav comm-box">
                            <div className="nav-title">文章目录</div>
                            {/* <MarkNav
                                className="article-menu"
                                source={props.article_content}
                                ordered={false}
                            /> */}
                            <div className="toc-list">
                                {tocify && tocify.render()}
                            </div>
                        </div>
                    </Affix>
                </Col>
            </Row>
            <Footer />
        </div>
    )
}


Detailed.getInitialProps = async (ctx) => {
    console.log("init-d", ctx);
    let id = ctx.query.id;

    const result = new Promise((resolve) => {
        that.$http(`${servicePath.getArticleById}${id}`).then(res => {
            console.log('远程数据--res', res.data.data)
            resolve(res.data.data[0])
        })
    })

    return await result
}
export default Detailed